<template>
  <div id="data" class="wrapper" ref="wrap">
    <div class="cheshi">
      <div v-if="cakelist.list">
        <div class="navbar">
          <NavBar :cakename="cakelist.list.name"></NavBar>
        </div>
        <div><img :src="cakelist.wap_pictures.wap_picture" alt="" /></div>

        <div class="tit">
          <div class="name">{{ cakelist.list.name }}</div>
          <div>
            <div v-html="cakelist.list.describe"></div>
          </div>

          <div class="text">
            <van-button
              type="primary"
              @click="show = true"
              color="#76361f"
              plain
              size="small"
            >
              <span> 规格数量选择: （{{ cakelist.specs.name }}） x1</span>
              <span>>></span></van-button
            >
            <van-overlay :show="show">
              <div class="wrapper" @click="hendleSpe">
                <div class="block">
                  <div class="p-30">￥{{ cakelist.specs.discount_price }}</div>
                  <div><img :src="cakelist.specs.pic" alt="" /></div>
                  <div class="flex flex-wrap">
                    <div
                      class="p-30 m-15 body"
                      v-for="(item, ind) in cakelist.list.specs"
                      :key="ind"
                      @click="handleindex(ind)"
                    >
                      <span class="p-20 m-r-15 style">{{ item.name }}</span>
                      <i
                        class="iconfont icon-dagou icn"
                        v-if="index == ind"
                      ></i>
                    </div>
                  </div>

                  <div class="p-30 m-b-15">
                    <span class="m-r-20">数量</span>
                    <van-stepper v-model="value" />
                  </div>
                  <div class="btn m-b-15 flex justify-center">
                    <button class="p-20" @click="show = false">确定</button>
                  </div>
                </div>
              </div>
            </van-overlay>
          </div>
          <div v-html="cakelist.list.wap_description" class="imglist"></div>
        </div>
      </div>

      <!-- 底部菜单 -->
      <van-action-bar>
        <van-action-bar-button
          color="#4a2321"
          text="加入购物车"
          @click="handleCartAdd(id)"
        />
        <van-action-bar-button
          color="#7b4342"
          text="立即订购"
          @click="handleset"
        />
      </van-action-bar>
    </div>
  </div>
</template>

<script setup>
// 引用
import { nextTick, onMounted } from "@vue/runtime-core";
import request from "../utils/request";
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { computed } from "@vue/reactivity";

import { useStore } from "vuex";

// import BScroll from '@better-scroll/core'

let store = useStore();
let route = useRoute();
let router = useRouter();
let id = route.query.id;
const value = ref(1);
const show = ref(false);
let index = ref(0);

let cakelist = reactive({
  list: [],
  wap_pictures: [],
  specs: [],
});

// 方法
onMounted(() => {
  request
    .get(`/cake/o/home/product/${id}/5?discount=0&gradeSpecIds=`)
    .then((res) => {
      cakelist.list = res.data.data;
      // console.log("详情页数据", cakelist.list);
      cakelist.wap_pictures = res.data.data.wap_pictures[0];
      cakelist.specs = cakelist.list.specs[index.value];
      // console.log(typeof(cakelist.list.specs));
    });
});

let handleindex = (n) => {
  // console.log(n);
  index.value = n;
  request
    .get(`/cake/o/home/product/${id}/5?discount=0&gradeSpecIds=`)
    .then((res) => {
      // console.log(res);
      cakelist.list = res.data.data;
      cakelist.specs = cakelist.list.specs[index.value];
    });
};
let handleset = () => {
  console.log(typeof cakelist.specs);
  let set = { ...cakelist.specs, ...cakelist.wap_pictures };
  router.push({
    path: "/settlement",
    query: set,
  });
};
// 提取用户信息

let userInfo = computed(() => {
  return store.state.user.userInfo;
});
let handleCartAdd = (id) => {
  if (!userInfo.value) {
    //如果用户没有登录
    router.push("/login");
    return;
  }
  //如果用户登录了,发起请求，带着需要的数据触发action,存入购物车线上和状态机
  let { name, price } = cakelist.list.specs[0];
  let product_name = cakelist.list.name;
  let { product_id, pc_cover } = cakelist.list.cover;
  store.dispatch("cart/cartAddAct", {
    userid: userInfo.value._id, //用户id
    id: product_id, //商品id
    product_name,
    product_price: price,
    product_spec_name: name, //规格
    product_quantity: 1,
    pc_cover,
    isCheck: true,
  });
};
</script>

<style lang="less" scoped>
.wrapper {
  height: 100vh !important;
}
.cheshi {
  padding-top: 9.2rem;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 75rem;
  z-index: 10;
}
.tit {
  padding: 0 3rem 10rem 3rem;
}
.imglist {
  width: 69rem;
}
:deep(img) {
  width: 100%;
}
.wrapper {
  height: 100%;
}

.style {
  border: 1px solid #753724;
  font-size: 12px;
  background: #fff;
}
.body {
  position: relative;
}
.icn {
  color: #753724;
  position: absolute;
  top: 4px;
  left: 16px;
  z-index: 10;
  font-size: 12px;
}
.block {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  padding-top: 12rem;
  color: #753724;
}
.name {
  font-size: 14px;
  margin: 2rem 0;
}
.text {
  margin: 2rem 0;
}
</style>
